{%- liquid
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
    else
      assign text_color = ''
  endcase

  assign sectionsList = ''
  for block in section.blocks
    if block.settings.section_container != blank
      if sectionsList != blank
        assign sectionsList = sectionsList | append: '&' | append: block.settings.section_container
      else
        assign sectionsList = block.settings.section_container
      endif
    endif
  endfor
-%}
<div class="{{ section.settings.section_margin_top }} {{ section.settings.section_margin_bottom }}">
  <div class="{{ background_color }}">
    <div class="container">
      <div class="content-inner d-flex">
        <ul class="nav tab-list mx-auto text-nowrap flex-nowrap as-tabs" data-sectionlist="{{ sectionsList }}">
          {%- for block in section.blocks -%}
            {% comment %} {%- assign tabName = block.settings.tab_label | downcase | replace: ' ', '-' -%} {% endcomment %}
            <li class="nav-item d-flex" role="presentation" {% if block.settings.show_customer_feedback %}data-scrol="customer-feedback"{% endif %}>
              <a class="as-tab-item tab-item py-3 {% if forloop.first %}active ms-0{% elsif forloop.last %}me-0{% endif %} cursor-pointer {{ text_color }}" {% if block.settings.show_customer_feedback  %}id="customer-feedback" {% else %} id="cate-tab-{{ forloop.index }}" {% endif %} data-sections="{{ block.settings.section_container }}">
                {{ block.settings.tab_label }}
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</div>
{% schema %}

{
  "name": "Category tab",
  "class": "as-category-tab category-tab position-sticky",
  "tag": "section",
  "settings": [
    {
      "type": "select",
      "id": "color_schema",
      "label": "Background color",
      "options": [
        {
          "value": "primary",
          "label": "Primary"
        },
        {
          "value": "secondary",
          "label": "Secondary"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "white",
          "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "white"
    },
    {
      "type": "select",
      "id": "text_color",
      "label": "Text color",
      "options": [
        {
          "value": "white",
          "label": "White"
        }, {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "black"
    }, {
      "type": "select",
      "id": "section_margin_top",
      "label": "Section top space",
      "options": [
        {
          "value": "",
          "label": "None"
        }, {
          "value": "mt-3",
          "label": "Small"
        }, {
          "value": "mt-section",
          "label": "Large"
        }
      ],
      "default": "mt-3"
    }, {
      "type": "select",
      "id": "section_margin_bottom",
      "label": "Section bottom space",
      "options": [
        {
          "value": "",
          "label": "None"
        }, {
          "value": "mb-3",
          "label": "Small"
        }, {
          "value": "mb-section",
          "label": "Large"
        }
      ],
      "default": ""
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "label": "Tab label",
          "type": "text",
          "id": "tab_label",
          "default": "Tab"
        }, 
        {
          "type": "checkbox",
          "id": "show_customer_feedback",
          "label": "Use This Tab For customer feedback",
          "default": false
        },
        {
          "type": "text",
          "id": "section_container",
          "label": "Section Container"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Category Tab"
    }
  ]
}

{% endschema %}
